<!DOCTYPE html>
<html>
<head>
<title>Custom Relationships</title>
<meta name="description" content="Examples of different visuals for relationships (links)." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,
          layout: $(go.TreeLayout,
            { layerSpacing: 150, arrangementSpacing: new go.Size(2, 2), setsPortSpot: false, setsChildPortSpot: false })
        });
    myDiagram.focus();

    // this typically represents a person
    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Shape, "Circle",
          { desiredSize: new go.Size(28, 28), fill: "white", strokeWidth: 1.5, portId: "" },
          new go.Binding("figure")),
        $(go.TextBlock, "name",
          new go.Binding("text"))
      );

    // this template works for all kinds of relationships
    myDiagram.linkTemplate =
      $(go.Link, go.Link.Bezier,  // slightly curved, by default
        { reshapable: true },  // users can reshape the link route
        $(go.Shape,  // the link's path shape
          { isPanelMain: true, stroke: "transparent" },
          new go.Binding("stroke", "patt", function(f) { return (f === "") ? "black" : "transparent"; }),
          new go.Binding("pathPattern", "patt", convertPathPatternToShape)),
        $(go.Shape,  // the link's path shape
          { isPanelMain: true, stroke: "transparent", strokeWidth: 3 },
          new go.Binding("pathPattern", "patt2", convertPathPatternToShape)),
        $(go.Shape,  // the "to" arrowhead
          { toArrow: "", fill: null, scale: 1.2 },
          new go.Binding("toArrow"),
          new go.Binding("stroke", "patt", convertPathPatternToColor)),
        $(go.TextBlock,  // show the path object name
          { segmentOffset: new go.Point(0, 12) },
          new go.Binding("text", "patt")),
        $(go.TextBlock,  // show the second path object name, if any
          { segmentOffset: new go.Point(0, -12) },
          new go.Binding("text", "patt2"))
      );


    // Conversion functions that make use of the PathPatterns store of pattern Shapes
    function convertPathPatternToShape(name) {
      if (!name) return null;
      return PathPatterns.getValue(name);
    }

    function convertPathPatternToColor(name) {
      var pattobj = convertPathPatternToShape(name);
      return (pattobj !== null) ? pattobj.stroke : "transparent";
    }


    // Define a bunch of small Shapes that can be used as values for Shape.pathPattern
    var PathPatterns = new go.Map('string', go.Shape);

    function definePathPattern(name, geostr, color, width, cap) {
      if (typeof name !== 'string' || typeof geostr !== 'string') throw new Error("invalid name or geometry string argument: " + name + " " + geostr);
      if (color === undefined) color = "black";
      if (width === undefined) width = 1;
      if (cap === undefined) cap = "square";
      PathPatterns.add(name,
        $(go.Shape,
          {
            geometryString: geostr,
            fill: "transparent",
            stroke: color,
            strokeWidth: width,
            strokeCap: cap
          }
        ));
    }

    definePathPattern("Single", "M0 0 L1 0");
    definePathPattern("Double", "M0 0 L1 0 M0 3 L1 3");
    definePathPattern("Triple", "M0 0 L1 0 M0 3 L1 3 M0 6 L1 6");
    definePathPattern("DashR", "M0 0 M3 0 L6 0", "red");
    definePathPattern("DoubleDashR", "M0 0 M3 0 L6 0 M3 3 L6 3", "red");
    definePathPattern("TripleDashR", "M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6", "red");
    definePathPattern("Dash", "M0 0 M3 0 L6 0");
    definePathPattern("DoubleDash", "M0 0 M3 0 L6 0 M3 3 L6 3");
    //definePathPattern("TripleDash", "M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6");
    definePathPattern("Dot", "M0 0 M4 0 L4.1 0", "black", 2, "round");
    definePathPattern("DoubleDot", "M0 0 M4 0 L4.1 0 M4 3 L4.1 3", "black", 2, "round");
    definePathPattern("SingleG", "M0 0 L1 0", "green");
    definePathPattern("DoubleG", "M0 0 L1 0 M0 3 L1 3", "green");
    definePathPattern("SingleR", "M0 0 L1 0", "red");
    definePathPattern("TripleR", "M0 0 L1 0 M0 3 L1 3 M0 6 L1 6", "red");
    definePathPattern("ZigzagB", "M0 3 L1 0 3 6 4 3", "blue");
    definePathPattern("ZigzagR", "M0 3 L1 0 3 6 4 3", "red");
    definePathPattern("BigZigzagR", "M0 4 L2 0 6 8 8 4", "red");
    definePathPattern("DoubleZigzagB", "M0 3 L1 0 3 6 4 3 M0 9 L1 6 3 12 4 9", "blue");
    definePathPattern("CrossG", "M0 0 M3 0 M1 0 L1 8", "green");
    definePathPattern("CrossR", "M0 0 M3 0 M1 0 L1 8", "red");
    //definePathPattern("Railroad", "M0 2 L3 2 M0 6 L3 6 M1 0 L1 8");  // also == Double & Cross
    definePathPattern("BackSlash", "M0 3 L2 6 M1 0 L5 6 M4 0 L6 3");
    definePathPattern("Slash", "M0 3 L2 0 M1 6 L5 0 M4 6 L6 3");
    definePathPattern("Coil", "M0 0 C2.5 0  5 2.5  5 5  C5 7.5  5 10  2.5 10  C0 10  0 7.5  0 5  C0 2.5  2.5 0  5 0");
    definePathPattern("Square", "M0 0 M1 0 L7 0 7 6 1 6z");
    definePathPattern("Circle", "M0 3 A3 3 0 1 0 6 4  A3 3 0 1 0 0 3");
    definePathPattern("BigCircle", "M0 5 A5 5 0 1 0 10 5  A5 5 0 1 0 0 5");
    definePathPattern("Triangle", "M0 0 L4 4 0 8z");
    definePathPattern("Diamond", "M0 4 L4 0 8 4 4 8z");
    definePathPattern("Dentil", "M0 0 L2 0  2 6  6 6  6 0  8 0");
    definePathPattern("Greek", "M0 0 L1 0  1 3  0 3  M0 6 L4 6  4 0  8 0  M8 3 L7 3  7 6  8 6");
    definePathPattern("Seed", "M0 0 A9 9 0 0 0 12 0  A9 9 180 0 0 0 0");
    definePathPattern("SemiCircle", "M0 0 A4 4 0 0 1 8 0");
    definePathPattern("BlindHem", "M0 4 L2 4  4 0  6 4  8 4");
    definePathPattern("Zipper", "M0 4 L1 4 1 0 8 0 8 4 9 4  M0 6 L3 6 3 2 6 2 6 6 9 6");
    //definePathPattern("Zipper2", "M0 4 L1 4 1 0 8 0 8 4 9 4  M0 7 L3 7 3 3 6 3 6 7 9 7");
    definePathPattern("Herringbone", "M0 2 L2 4 0 6  M2 0 L4 2  M4 6 L2 8");
    definePathPattern("Sawtooth", "M0 3 L4 0 2 6 6 3");


    // helper function for creating sequential chains of nodes
    function addLinks(patt1a, patt1b, patt2a, patt2b, patt3a, patt3b) {
      var arrow = "OpenTriangle";

      var left = { figure: "Square" };
      myDiagram.model.addNodeData(left);
      var middle = { figure: "Circle" };
      myDiagram.model.addNodeData(middle);
      myDiagram.model.addLinkData({ from: left.key, to: middle.key, patt: patt1a, patt2: patt1b, toArrow: arrow });

      if (patt2a) {
        var right = { figure: "Triangle" };
        myDiagram.model.addNodeData(right);
        myDiagram.model.addLinkData({ from: middle.key, to: right.key, patt: patt2a, patt2: patt2b, toArrow: arrow });

        if (patt3a) {
          var farright = { figure: "Diamond" };
          myDiagram.model.addNodeData(farright);
          myDiagram.model.addLinkData({ from: right.key, to: farright.key, patt: patt3a, patt2: patt3b, toArrow: arrow });
        }
      }
    }

    // simple path objects
    var it = PathPatterns.iteratorKeys;
    while (it.next()) {
      addLinks(it.value, "", it.next() ? it.value : "", "", it.next() ? it.value : "");
    }
    // compound path objects
    addLinks("DoubleG", "CrossG", "Single", "CrossR");
    addLinks("Dash", "ZigzagR", "Dash", "BigZigzagR");
    addLinks("Double", "ZigzagR", "Double", "BigZigzagR");
    addLinks("Triple", "ZigzagR", "Triple", "BigZigzagR");
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
  <p>
    This illustrates how one can define custom strokes for Links (or really any Shape that is relatively straight)
    by making use of the <a>Shape.pathPattern</a> property to repeatedly draw a small Shape along the stroke path.
    These examples may be useful in generating diagrams showing social or emotional relationships or other cases
    where it is useful to distinguish kinds of relationships in more manners than just by the <a>Shape.stroke</a> (color)
    or <a>Shape.strokeWidth</a> or <a>Shape.strokeDashArray</a>.
  </p>
  <p>
    The first set of link triplets, at the top, demonstrate the basic pathPatterns defined by the <code>definePathPattern</code> function in this page.
    The last set of link doublets, at the bottom, demonstrate how those basic pathPatterns can be combined in a single <a>Link</a>
    that has two <a>Shape</a>s that have <a>GraphObject.isPanelMain</a> set to true, so that both shapes get the same <a>Geometry</a>
    computed by the link.  Yet each such link shape draws a different path pattern.
  </p>
</div>
</body>
</html>